﻿<div class="hero-unit">
    <h1>Reserva tu pista por internet!!</h1>
    <p class="lead">Selecciona los datos acerca de la pista en la que quieres realizar la actividad, y reservala electrónicamente</p>
</div>

<div class="row">
<div id="msg" class="span5"></div> 
</div>

<div class="marketing">
        <div class="row span12">
            <form class="form-inline">
                           
                <div class="page-header">
                    <h2 class="badge badge-info" style="display: inline;"><strong>1.</strong></h2>
                    <h3 style="display: inline;">Selecciona tu pista favorita<small>...</small></h3>
                </div>
                
                <div class="row span10">
                    <span class="span2">
                            <select id="selectCentro">
                                <option value="-1" selected/>
                            </select>
                            <p class="help-block"><strong>A.&nbsp;</strong>Seleccione un centro...</small></p>
                    </span>
                    <span class="span2 offset1">
                            <select id="selectDeporte">
                                <option value="-1" selected/>
                            </select>
                            <p class="help-block"><strong>B.&nbsp;</strong>...una actividad...</small></p>
                    </span>
                    <span class="span2 offset1">
                            <select id="selectPista">
                                <option value="-1" selected/>
                            </select>
                            <p class="help-block"><strong>C.&nbsp;</strong>... y pista...</small></p>
                    </span>
                    <span class="offset1">
                        <a class="btn btn-primary" onclick="javascript:consultaPista();" href="#">Ver Pista</a>
                    </span> 
                </div>
            </form>
        </div>
        <div class="row-fluid span12">
            <div class="span4">
                <div class="page-header">
                    <h2 class="badge badge-info" style="display: inline;"><strong>2.</strong></h2>
                    <h3 style="display: inline;">Seleccione un dia<small>...</small></h3>
                </div>    
            </div>
            <div class="span2">&nbsp;</div>
            <div class="span4">
                <div class="page-header">
                    <h2 class="badge badge-info" style="display: inline;"><strong>3.</strong></h2>
                    <h3 style="display: inline;">Y marque el horario deseado<small>...</small></h3>
                </div>    
            </div>
        </div>      
        <div class="row span12">
                <div id="calendar" class="span10"></div>
        </div>      

</div>

@section Hidden {
    <div class="modal hide fade" id="reservaModal">        
            
    </div>  
}

@section Script {   
    <script type='text/javascript' src="@Url.Content("~/assets/script/ReservaHelper.js")"></script>   
    <script type="text/javascript"> 
    </script>
}